<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发表博客</title>
    <link rel="stylesheet" href="plug-ins/EditorMD/lib/codemirror/codemirror.min.css">
    <link rel="stylesheet" href="Bootstrap/dist/css/bootstrap.min.css">
    <script src="js/jQuery/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="plug-ins/EditorMD/editormd.amd.min.js"></script>
    <link rel="stylesheet" type="text/css" href="plug-ins/EditorMD/css/editormd.css"/>
    <script src="Bootstrap/dist/js/bootstrap.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            /*margin: 10vh auto;*/
            width: 90%;
            height: 80vh;
        }

        #title {
            display: block;
            width: 630px;
            margin: 0 0 12px 0;
            outline: none;
            border: none;
            color: #333;
            font-size: 30px;
        }

        textarea {
            overflow: auto;
            resize: none;
            font-family: "PingFang-SC-Medium", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", tahoma, arial, simsun, "宋体", serif;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row mt-2 mb-2">
        <div class="col-md-12">
            <div class="offset-md-10">
                <button class="btn btn-primary float-right">发布</button>
                <button class="btn btn-secondary float-right">存为草稿</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-9 offset-sm-1">
            <div class="row">
                <div class="title">
                <textarea id="title" class="border-0" type="text" placeholder="请填写标题" maxlength="32"
                          style="height: 50px" wrap="hard" autocomplete="off"></textarea>
                </div>
            </div>
            <div class="row">
                <div class="content">
                    <div id="editormd">
                        <textarea id="input-content" style="display:none;" placeholder="在此处填写文章正文"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="row">
                <div class="col">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h6>分类目录</h6>
                        </li>
                        <div style="width: 224px; height: 255px; overflow-y: scroll">
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck2">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck3">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck4">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck5">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck6">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck7">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="defaultCheck8">
                                    <label class="form-check-label" for="defaultCheck1">
                                        Default checkbox
                                    </label>
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <h6>标签</h6>
                        </li>
                        <li class="list-group-item">
                            <div class="form-group">
                                <label for="exampleInputEmail1">
                                    <small class="text-muted">添加新标签</small>
                                </label>
                                <input type="email" class="form-control" id="exampleInputEmail1"
                                       aria-describedby="emailHelp">
                                <small id="emailHelp" class="form-text text-muted">用逗号或回车分隔</small>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
        </div>
    </div>
</div>


<script src="js/jQuery/jquery-3.4.1.js"></script>
<script type="text/javascript">
    $(function () {
        var editor = editormd("editormd", {
            path: 'plug-ins/EditorMD/lib/',
            saveHTMLToTextarea: true,//注意3：这个配置，方便post提交表单
            /**上传图片相关配置如下*/
            imageUpload: true,
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "uploadImg"//注意你后端的上传图片服务地址
        });

        /*
        // or
        var editor = editormd({
            id   : "editormd",
            path : "../lib/"
        });
        */
    });
</script>
</body>
</html>